<template>
    <div>
        <button @click="startRecording" v-if="!isRecording">开始录音</button>
        <button @click="stopRecording" v-if="isRecording">停止录音</button>
        <audio ref="audioPlayer" controls></audio>
        <el-date-picker
            v-model="searchLastTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts2"
        ></el-date-picker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isRecording: false,
            mediaRecorder: null,
            audioChunks: [],
            audioURL: null,
            shortcuts2: [
                {
                    text: '今天',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        return [start, end]
                    },
                },
                {
                    text: '昨天',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        end.setTime(end.getTime() - 3600 * 1000 * 24)
                        start.setTime(start.getTime() - 3600 * 1000 * 24)
                        return [start, end]
                    },
                },
                {
                    text: '本周',
                    value: () => {
                        const current = new Date()
                        let nowDayOfWeek = current.getDay()
                        if (nowDayOfWeek === 0) nowDayOfWeek = 7
                        const dayNum = 1 * 24 * 60 * 60 * 1000
                        const firstDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * dayNum)
                        const lastDate = new Date(new Date(firstDate).valueOf() + 6 * dayNum)
                        const end = new Date(lastDate)
                        const start = new Date(firstDate)
                        return [start, end]
                    },
                },
                {
                    text: '上周',
                    value: () => {
                        const date = new Date(new Date() - 3600 * 1000 * 24 * 7)
                        let nowDayOfWeek = date.getDay()
                        if (nowDayOfWeek === 0) nowDayOfWeek = 7
                        const dayNum = 1 * 24 * 60 * 60 * 1000
                        const firstDate = new Date(date.valueOf() - (nowDayOfWeek - 1) * dayNum)
                        const lastDate = new Date(new Date(firstDate).valueOf() + 6 * dayNum)
                        const end = new Date(lastDate)
                        const start = new Date(firstDate)
                        return [start, end]
                    },
                },
                {
                    text: '本月',
                    value: () => {
                        const date = new Date()
                        const currentMonth = date.getMonth()
                        const nextMonth = currentMonth + 1
                        const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
                        const oneDay = 24 * 60 * 60 * 1000

                        const start = new Date(date.setDate(1))
                        const end = new Date(new Date(nextMonthFirstDay - oneDay))
                        // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        return [start, end]
                    },
                },
                {
                    text: '上月',
                    value: () => {
                        const date = new Date()
                        const year = date.getFullYear()
                        const month = date.getMonth()
                        const start = new Date(year, month - 1, 1)
                        const end = new Date(year, month, 0)

                        return [start, end]
                    },
                },
                {
                    text: '本季度',
                    value: () => {
                        let date = new Date()
                        let dateYear = date.getFullYear()
                        let dateMonth = date.getMonth()
                        let dateQuarter = Math.floor(dateMonth / 3) + 1
                        let start
                        let end
                        switch (dateQuarter) {
                            case 1:
                                start = new Date(dateYear, 0, 1)
                                end = new Date(dateYear, 2, 31)
                                break
                            case 2:
                                start = new Date(dateYear, 3, 1)
                                end = new Date(dateYear, 5, 30)
                                break
                            case 3:
                                start = new Date(dateYear, 6, 1)
                                end = new Date(dateYear, 8, 30)
                                break
                            case 4:
                                start = new Date(dateYear, 9, 1)
                                end = new Date(dateYear, 11, 31)
                                break
                            default:
                                break
                        }
                        return [start, end]
                    },
                },
                {
                    text: '本年度',
                    value: () => {
                        let date = new Date()
                        let dateYear = date.getFullYear()
                        const end = new Date(dateYear, 11, 31)
                        const start = new Date(dateYear, 0, 1)
                        return [start, end]
                    },
                },
            ],
        }
    },
    methods: {
        startRecording() {
            wx.ready(() => {
                wx.startRecord({
                    success: () => {
                        this.isRecording = true
                    },
                    cancel: () => {
                        alert('用户拒绝授权录音')
                    },
                })
            })
        },
        stopRecording() {
            wx.ready(() => {
                wx.stopRecord({
                    success: () => {
                        wx.onVoiceRecordEnd({
                            complete: (res) => {
                                this.audioChunks.push(res.localId)
                                this.isRecording = false
                            },
                        })
                    },
                })
            })
        },
        playAudio() {
            if (this.audioChunks.length > 0) {
                wx.playVoice({
                    localId: this.audioChunks[this.audioChunks.length - 1],
                })
            } else {
                alert('没有录音文件')
            }
        },
    },
    mounted() {
        if (typeof wx !== 'undefined') {
            wx.config({
                // 配置微信JS-SDK
                debug: false,
                appId: '你的appId',
                timestamp: '', // 必填，生成签名的时间戳
                nonceStr: '', // 必填，生成签名的随机串
                signature: '', // 必填，签名，见附录1
                jsApiList: ['startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })

            // 注册error回调函数
            wx.error(function (res) {
                console.log('微信JS-SDK配置错误', res)
            })
        } else {
            console.error('微信JS-SDK未加载')
        }
    },
}
</script>
